import {RootState} from '@/models/index';
import {getTimeString} from '@/utils/index';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Slider from 'react-native-slider-x';
import {connect, ConnectedProps} from 'react-redux';
const mapStateToProps = ({player}: RootState) => {
  return {
    player: player,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {}
const PlaySlider: React.FC<IProps> = props => {
  const {player, dispatch} = props;
  const {currentTime, duration} = player;
  const renderThumb = () => {
    return (
      <View>
        <Text style={styles.text}>
          {getTimeString(currentTime)}/{getTimeString(duration)}
        </Text>
      </View>
    );
  };
  const onSlidingComplete = (setCurrentTime: number) => {
    dispatch({
      type: 'player/watcherCurrentTime-start',
    });
    dispatch({
      type: 'player/setCurrentTime',
      payload: {time: setCurrentTime},
    });
  };
  const onSliderEditing = (sliderCurrentNumber: number) => {
    // dispatch({
    //   type: 'player/watcherCurrentTime-end',
    // });
    dispatch({
      type: 'player/setState',
      payload: {
        currentTime: sliderCurrentNumber,
      },
    });
  };
  const onSliderEditStart = () => {
    dispatch({
      type: 'player/watcherCurrentTime-start',
    });
  };
  console.log('currentTime', currentTime);
  return (
    <View style={styles.container}>
      <Slider
        value={currentTime}
        maximumValue={duration}
        maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
        minimumTrackTintColor="#FFF"
        renderThumb={renderThumb}
        thumbStyle={styles.thumb}
        onSlidingComplete={onSlidingComplete} //用户滑动释放回调
        onValueChange={onSliderEditing} //用户滑动回调
        onSlidingStart={onSliderEditStart} //用户点击滑块回调
      />
      <View>
        <Text style={styles.text}>
          {getTimeString(currentTime)}/{getTimeString(duration)}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 10,
    height: 40,
  },
  thumb: {
    backgroundColor: '#FFF',
    width: 76,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 10,
  },
});

export default connector(PlaySlider);
